<template>
    <div class='view-page women-wellness-page'>
        <!-- 主横幅区域 -->
        <div class="hero-banner">
            <div class="hero-content">
                <h1>Start your health journey with Harvest Gain®, we provide the best solutions</h1>
                <p>Harvest Gain® has long been a trusted partner in health and wellness. Our products are designed to
                    address a variety of health concerns. Explore the science behind each formula to find the best
                    solution for your unique needs.</p>
                <button class="shop-button" @click="toAllProducts">Get health products</button>
            </div>
        </div>

        <!-- 内容区域 -->
        <div class="content-section">
            <!-- 左侧视频卡片 -->
            <div class="video-card">
                <img src="../../assets/images/bounty/blueberry.jpeg" alt="">
            </div>

            <!-- 右侧文章内容 -->
            <div class="article-content">
                <blockquote class="quote">"Inner strength begins with cellular protection."</blockquote>
                <h2>The Science Behind Selenium Power</h2>
                <p>Selenium is a vital trace element that fuels your body’s antioxidant defense system, helping to
                    neutralize free radicals, support immune balance, and promote healthy metabolism. Our formula
                    combines premium selenium with natural extracts to protect cells from within and maintain your
                    youthful energy every day.
                </p>
            </div>
        </div>

        <!-- 产品展示区域 -->
        <div class="products-section">
            <div class="section-header" @click="toAllProducts">
                <h2>Tailored Wellness Solutions for You</h2>
                <p>Explore our curated collection designed to support your personal well-being</p>
            </div>

            <div class="products-grid">
                <product-list :showFilter="false" :showCategory="false" :showLoadMore="showMore" :productList="productList"
                    @loadMoreProducts="loadMoreProducts"></product-list>
            </div>

        </div>

        <content-banner></content-banner>
        <instagram></instagram>
    </div>
</template>

<script>
import Instagram from '@/components/instagram/index.vue';
import ContentBanner from '@/components/content-banner/index.vue';
import ProductList from '@/components/product-list/index.vue';
import { pageSelectProductList } from "@/config/api";
export default {
    components: {
        Instagram,
        ContentBanner,
        ProductList,
    },
    data() {
        return {
          showMore: true,
            // 可以在这里添加数据
            productList: [],
            pageParam: {
                categoryId: null,
                pageNum: 1,
                pageSize: 8,
            },
        };
    },
    mounted() {
        // 可以在这里添加页面加载后的逻辑
    },
    created() {
        this.filterProductList();
    },
    methods: {
        // 筛选产品列表
        filterProductList() {
            pageSelectProductList(this.pageParam).then((res) => {
                if (res.code === 200) {
                    this.productList = [...this.productList, ...res.data.records];
                    this.showMore = res.data.current * res.data.size < res.data.total;
                }
            });
        },
        // 加载更多产品
        loadMoreProducts() {
            this.pageParam.pageNum++;
            this.filterProductList();
        },
        toAllProducts() {
            this.$router.push({ path: '/allProduct' });
        }
    },
}
</script>

<style scoped lang="less">
.women-wellness-page {
    width: 100%;
    overflow-x: hidden;
}

/* 主横幅样式 */
.hero-banner {
    position: relative;
    height: 70vh;
    min-height: 500px;
    background-image: url('https://www.dozediary.top/platform-api/local-static/langchat/2025102368fa3804e4b07e9af7a79bfa.webp');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
}

.hero-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3));
}

.hero-content {
    position: relative;
    max-width: 500px;
    margin-left: 18%;
    color: white;
    z-index: 1;
}

.hero-content h1 {
    font-size: 36px;
    font-weight: 600;
    margin-bottom: 20px;
    line-height: 1.3;
}

.hero-content p {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 30px;
}

.shop-button {
    border: 1px solid #d2e38f;
    background-color: #ffffff;
    color: #d35492;
    border: none;
    padding: 16px 24px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.shop-button:hover {
    background-color: #f0f0f000;
    color: white;
}

/* 内容区域样式 */
.content-section {
    display: flex;
    max-width: 1200px;
    margin: 60px auto;
    gap: 40px;
    padding: 0 20px;
}

.video-card {
    flex: 1;
    max-width: 500px;

    img {
        border-radius: 10px;
    }
}

.video-placeholder {
    height: 300px;
    background-color: #f8d7da;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #721c24;
    position: relative;
    padding: 40px;
}

.video-placeholder h3 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 30px;
    line-height: 1.4;
}

.play-button {
    width: 70px;
    height: 70px;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

.play-button:hover {
    transform: scale(1.1);
}

.play-icon {
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 25px solid #721c24;
    margin-left: 5px;
}

.article-content {
    flex: 1;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.quote {
    font-size: 18px;
    font-style: italic;
    color: #666;
    margin-bottom: 20px;
    border-left: 4px solid #809e2c;
    padding-left: 20px;
}

.article-content h2 {
    font-size: 28px;
    font-weight: 600;
    color: #333;
    margin-bottom: 20px;
}

.article-content p {
    font-size: 16px;
    line-height: 1.6;
    color: #666;
    margin-bottom: 30px;
}

.learn-more-button {
    align-self: flex-start;
    background-color: transparent;
    color: #333;
    border: 2px solid #333;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.learn-more-button:hover {
    background-color: #333;
    color: #fff;
}

/* 响应式设计 */
@media (max-width: 992px) {
    .hero-content {
        margin-left: 60px;
        max-width: 400px;
    }

    .hero-content h1 {
        font-size: 30px;
    }

    .content-section {
        flex-direction: column;
        align-items: center;
    }

    .video-card,
    .article-content {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .hero-banner {
        height: 60vh;
        min-height: 400px;
    }

    .hero-content {
        margin-left: 30px;
        margin-right: 30px;
    }

    .hero-content h1 {
        font-size: 26px;
    }

    .video-placeholder {
        height: 250px;
        padding: 30px;
    }

    .video-placeholder h3 {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .hero-content {
        margin-left: 20px;
        margin-right: 20px;
    }

    .hero-content h1 {
        font-size: 24px;
    }

    .article-content h2 {
        font-size: 24px;
    }
}

/* 产品展示区域样式 */
.products-section {
    max-width: 1200px;
    margin: 80px auto;
    padding: 0 20px;
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-header h2 {
    font-size: 32px;
    font-weight: 600;
    color: #333;
    margin-bottom: 15px;
}

.section-header p {
    font-size: 16px;
    color: #666;
    line-height: 1.6;
}

.products-grid {
    // display: grid;
    // grid-template-columns: repeat(4, 1fr);
    // gap: 30px;
    margin-bottom: 50px;
}

.product-card {
    text-align: center;
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.product-image {
    height: 250px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.product-image img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

.product-name {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
}

.product-description {
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
}

.product-rating {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-bottom: 10px;
}

.stars {
    color: #f1c40f;
    font-size: 14px;
}

.rating-count {
    font-size: 12px;
    color: #666;
}

.product-info {
    font-size: 12px;
    color: #666;
    margin-bottom: 20px;
    line-height: 1.4;
}

.view-product-btn {
    background-color: #e8f4d8;
    color: #809e2c;
    border: none;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
}

.view-product-btn:hover {
    background-color: #809e2c;
    color: #fff;
}

.shop-all-container {
    text-align: center;
}

.shop-all-btn {
    background-color: #809e2c;
    color: #fff;
    border: none;
    padding: 12px 30px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.shop-all-btn:hover {
    background-color: #6a8624;
}

/* 产品区域响应式设计 */
@media (max-width: 1024px) {
    .products-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .section-header h2 {
        font-size: 28px;
    }
}

@media (max-width: 480px) {
    .products-grid {
        grid-template-columns: 1fr;
    }

    .section-header h2 {
        font-size: 24px;
    }

    .product-image {
        height: 200px;
    }
}
</style>